import React, { Component } from 'react';
import {
  StyleSheet,
  View,
  ScrollView,
  Dimensions,
  TouchableOpacity,
  InteractionManager,
  Platform,
  UIManager,
  Text
} from 'react-native';
import ScrollableTabView from 'react-native-scrollable-tab-view';
import SelectCityTabBar from './SelectCityTabBar'
import {AREA_JSON} from '../../resource/city';
const { height, width } = Dimensions.get('window');

export default class AddressSelect extends Component {
  static defaultProps = {
    commitFun: function (value) {
      console.log(value);
    },
    dismissFun: function () {

    },
    lastAddress: null,
  };

  constructor(props) {
    super(props);
    if (Platform.OS === 'android') {
      UIManager.setLayoutAnimationEnabledExperimental(true)
    }
    const { lastAddress } = props;
    let selectAddress = this.initAddress(lastAddress);
    this.state = {
      selectAddress
    }
  }

  initAddress(lastAddress) {
    let selectAddress = [
      {
        id: null,
        name: null,
        childs: AREA_JSON,
      }];
    let array = null;

    function fun(array, value) {
      for (let item of array) {
        if (item.id + '' === value + '') {
          return item;
        }
      }
    }
    try {
      selectAddress = selectAddress.map((item, index) => {
        let result = fun(array ? array : AREA_JSON, lastAddress[index].id);
        if (result.childs) {
          array = result.childs;
        }
        return result;
      });
    } catch (e) {
      console.log('-----e-', e);
    }
    console.log(selectAddress)
    return selectAddress
  }


  /**
   * 列表行
   * @param item
   * @param i
   * @returns {XML}
   */
  renderListItem(item, i) {
    let itemStyle = styles.itemStyle;
    let textStyle = styles.itemText;
    let { selectAddress } = this.state;
    if (item.name === selectAddress[i].name) {
      itemStyle = [itemStyle];
      textStyle = [textStyle, { color: 'red' }]
    }
    return (
      <TouchableOpacity
        style={itemStyle}
        key={i + item.name}
        onPress={() => {
          this.pressItem(item, i)
        }}
      >
        <Text style={textStyle}>{item.name}</Text>
      </TouchableOpacity>
    )
  }

  /**
   * 点击列表事件
   * @param item 选中数据
   * @param i 选中行数
   */
  pressItem(item, i) {
    let { selectAddress } = this.state;
    const initObj = {
      id: null,
      name: null,
      childs: null,
    }
    let tempIndex = 0;
    if (i === 0) {
      selectAddress[0] = item;
      selectAddress[1] = initObj;
      selectAddress[2] = initObj;
      tempIndex = 1
    } else if (i === 1) {
      selectAddress[1] = item;
      selectAddress[2] = initObj;
      tempIndex = 2
    } else {
      selectAddress[2].id = item.id;
      selectAddress[2].name = item.name;
      tempIndex = 2
      let address = [
        {
          id: selectAddress[0].id,
          name: selectAddress[0].name
        },
        {
          id: selectAddress[1].id,
          name: selectAddress[1].name
        },
        {
          id: selectAddress[2].id,
          name: selectAddress[2].name
        }
      ]
      this.props.commitFun && this.props.commitFun(address);
      this.props.dismissFun&& this.props.dismissFun();
      return null;

    }
    this.setState({ selectAddress });
    InteractionManager.runAfterInteractions(() => {
      setTimeout(()=>{
        this.tabView.goToPage(tempIndex)
      },10)
    })

  }

  render() {
    const { selectAddress } = this.state;
    console.log(selectAddress)
    return (
      <View style={styles.container}>
        <ScrollableTabView
          ref={(tabView) => {
            this.tabView = tabView;
          }}
          renderTabBar={() => <SelectCityTabBar/>}
        >
          {selectAddress.map((obj, i) => {
            let array = (i === 0) ? AREA_JSON : selectAddress[i - 1].childs;
            if (array) {
              return (
                <ScrollView
                  key={'tab'+i}
                  tabLabel={obj.name || '请选择'}
                  style={styles.scrollStyleList}
                >
                  {array && array.map((obj2, j) => {
                    return this.renderListItem(obj2, i)
                  })}
                </ScrollView>
              )
            }
          })}
        </ScrollableTabView>
      </View>
    );
  }
}

const styles = StyleSheet.create({
  container: {
    height: 430,
    backgroundColor: '#fff',
  },
  scrollStyleList: {
    width: width,
    marginBottom:10,
    marginTop:10,
  },
  itemStyle: {
    marginTop: 5,
    width: width,
    height: 40,
    marginLeft: 15,
    justifyContent: 'center'
  },
  itemText: {
    fontSize: 15,
    color: '#333333'
  }
})
